<template>
	<view class="set">
		<view class="tips">首次登录请设置头像与昵称</view>
		<button
			class="avatar-wrappe"
			open-type="chooseAvatar"
			@chooseavatar="onChooseAvatar"
		>
			<image :src="avatarUrl"></image>
		</button>
		<input type="nickname" placeholder="请输入昵称" />
		<view @click="submit" class="submit">确定</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const avatarUrl = ref(
	'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
)
const onChooseAvatar = v => {
	avatarUrl.value = v.detail.avatarUrl
}
const submit = () => {
	//发请求保存昵称和头像url

	//进入首页
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>

<style lang="less" scoped>
.set {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 30rpx;
	.tips {
	}
	.avatar-wrappe {
		margin: 30rpx;
		padding: 0;
		border: none;
		// line-height: 176rpx;
		width: 176rpx;
		height: 176rpx;
		image {
			width: 176rpx;
			height: 176rpx;
		}
	}
	input {
		text-align: center;
	}
	.submit {
		margin: 60rpx;
		width: 686rpx;
		height: 80rpx;
		background: #006eff;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		border-radius: 4px;
	}
}
</style>
